<template>
  <div class="page-container" style="margin: 10px auto; width: 80%; height: 80%;">
    <h1 class="title" style="font-style: italic;color: #853b54;font-weight: bold;">留言信息</h1>
    <div class="container">
      <el-form :label-position="labelPosition" label-width="70px" :model="formLabelAlign">
        <el-form-item label="用户名称">
          <el-input v-model="formLabelAlign.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="formLabelAlign.region"></el-input>
        </el-form-item>
        <el-form-item label="留言内容">
          <el-input v-model="formLabelAlign.type" class="message-content-input" type="textarea"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm" class="submit-button">提交</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      labelPosition: 'right',
      formLabelAlign: {
        name: '',
        region: '',
        type: '',
      }
    };
  },
  methods: {
    submitForm() {
      console.log('提交的表单数据:', this.formLabelAlign);
      this.resetForm();
    },
    resetForm() {
      this.formLabelAlign = {
        name: '',
        region: '',
        type: ''
      };
    },

  }

}
</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* 新增，用于垂直居中内容 */
  width: 100%; /* 修改为100%，使容器宽度充满整个页面 */
  height: 100vh; /* 修改为100vh，使容器高度充满整个视口 */
  margin: 0; /* 修改为0，因为容器已经充满整个页面 */
  padding: 20px;
  box-sizing: border-box;
  background-image: url('../../assets/banner/banner_1.jpeg'); /* 替换为你的图片路径 */
  background-size: cover; /* 保持图片原始比例，不会变形 */
  background-attachment: fixed;
  background-repeat: no-repeat; /* 不重复背景图 */
  background-position: center center; /* 图片在容器中水平和垂直居中 */
}

.title {
  margin: auto;
  color:  #606266;
  font-size: 2em;
  margin-bottom: 20px;
  font-style: italic;
}

.container {
  width: 80%;
  max-width: 600px; /* 新增，限制最大宽度 */
  margin: auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.8); /* 给容器添加半透明背景色，以便内容可读 */
}

.message-content-input .el-textarea__inner {
  height: 100%;
}

.submit-button {
  width: 30%;
  background-color: #409eff; /* Element UI primary button color */
  border-color: #409eff; /* Element UI primary button border color */
  transition: background-color 0.3s, border-color 0.3s;
}

.submit-button:hover {
  background-color: #66b1ff; /* Darker shade for hover state */
  border-color: #66b1ff; /* Darker shade for hover state */
}
</style>
